{extend name="extend:iframe" /}

{block name="css"}
<link rel="stylesheet" type="text/css" href="/public/admin/css/layout.global.css" />
<link rel="stylesheet" type="text/css" href="/public/plug/FormCombox/FormCombox.css" />
<link rel="stylesheet" type="text/css" href="/public/plug/editormd/css/editormd.css" /> 
<style type="text/css">
	.layout-form {
		padding-left: 0; 
		padding-right: 16px;
	}
	.layout-form * {
		font-size: 14px;
	}
	.uploadFiles {
		width: 320px;
		height: 160px;
		position: relative;
	}
	.uploadFiles img {
		display: block;
		/*margin: 0 auto;*/
		max-width: 100%;
		max-height: 100%;
	}
	.uploadFiles input {
		display: block;
	    width: 100%;
	    height: 100%;
	    border: none;
	    outline: none;
	    background-color: transparent;
	    opacity: 0;
	    position: absolute;
	    top: 0;
	    left: 0;
	    cursor: pointer;
	}
	
	.editormd-dialog-header {
		line-height: normal!important;
	}
</style>
{/block}


{block name="body"}
<div class="_title">
    <div class="_main">路演活动</div>
    <div class="_sub clearfix">
        <div class="_btns">
            <ul class="clearfix">
                <li layout-mark="link" data-href="/admin/act.html">活动列表</li>
                <li class="active">发布活动</li>
            </ul>
        </div>
    </div>
</div>
<div class="_content">
	<div class="layout-form p-t-6x" id="layout-form-activity">
		<div class="layout-combox ">
			<label class="layout-form-label">选择行业</label>
			<div class="layout-form-ipt">
				<div class="layout-form-radio" layout-callback="_cb_type" id="bind-type-box">
					<input type="hidden" name="type" value="0" />
					<span>
						<a href="javascript:;" data-value="0" checked="checked">
							<i class="icon-selected"></i>
						</a>
						<font>自办型</font>
					</span>
					<span>
						<a href="javascript:;" data-value="1">
							<i class="icon-unselected"></i>
						</a>
						<font>外链型</font>
					</span>
				</div>
			</div>
		</div>
		<div class="layout-combox signupurl_box" style="display: none;">
			<label class="layout-form-label">报名链接</label>
			<div class="layout-form-ipt"><input type="text" name="sign_up_url" value="javascript:;"></div>
		</div>
		<div class="layout-combox ">
			<label class="layout-form-label">活动标题</label>
			<div class="layout-form-ipt"><input type="text" name="title"></div>
		</div>
		<div class="layout-combox uploadFilesBox">
			<label class="layout-form-label">封面图片</label>
			<div class="layout-form-ipt">
				<input type="hidden" name="cover" id="ipt-pc-cover" value="">
				<form class="uploadFiles" action="/*" onsubmit="return false;">
					<img src="/public/admin/images/upload-tips.png" id="bind-cover">
					<input layout-mark="uploadFile" type="file" multiple="" data-u="__ucover">
				</form>
				<p class="c-888 fs14r m-t-1x">logo尺寸：320px * 160px</p>
			</div>
		</div>
		<div class="layout-combox ">
			<label class="layout-form-label">模式</label>
			<div class="layout-form-ipt">
				<div class="layout-form-radio" layout-callback="_cb_model" id="bind-model-box">
					<input type="hidden" name="model" value="线上" />
					<span>
						<a href="javascript:;" data-value="线上" checked="checked">
							<i class="icon-selected"></i>
						</a>
						<font>线上</font>
					</span>
					<span>
						<a href="javascript:;" data-value="线下">
							<i class="icon-unselected"></i>
						</a>
						<font>线下</font>
					</span>
				</div>
			</div>
		</div>
		<div class="layout-combox city_box" style="display: none;">
			<label class="layout-form-label">城市</label>
			<div class="layout-form-ipt">
				<div class="layout-form-select" layout-callback="_cb_city" id="bind-city-box">
					<div class="layout-select-title"><input type="hidden" name="city">
						<p>请选择</p>
					</div>
					<ul class="layout-select-container" style="display: none;">
						<li data-value="北京">北京</li>
						<li data-value="上海">上海</li>
						<li data-value="广州">广州</li>
						<li data-value="深圳">深圳</li>
						<li data-value="天津">天津</li>
						<li data-value="青岛">青岛</li>
						<li data-value="杭州">杭州</li>
						<li data-value="苏州">苏州</li>
						<li data-value="南京">南京</li>
						<li data-value="武汉">武汉</li>
						<li data-value="重庆">重庆</li>
						<li data-value="成都">成都</li>
						<li data-value="厦门">厦门</li>
						<li data-value="西安">西安</li>
						<li data-value="其它">其它</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="layout-combox ">
			<label class="layout-form-label">详细地址</label>
			<div class="layout-form-ipt"><input type="text" name="address"></div>
		</div>
		<div class="layout-combox ">
			<label class="layout-form-label">主办方</label>
			<div class="layout-form-ipt"><input type="text" name="organizers" value="价值链"></div>
		</div>
		<div class="layout-combox ">
			<label class="layout-form-label">开始时间</label>
			<div class="layout-form-ipt"><input type="text" name="start_time" id="start_time"></div>
		</div>
		<div class="layout-combox ">
			<label class="layout-form-label">结束时间</label>
			<div class="layout-form-ipt"><input type="text" name="end_time" id="end_time"></div>
		</div>
		<div class="layout-combox ">
			<label class="layout-form-label">活动简介</label>
			<div class="layout-form-ipt">
				<div class="" id="content-editormd">
					<textarea id="content" name="introduction" style="height: 320px"></textarea>
				</div>
			</div>
		</div>
	</div>
	<div class="box-buttom clearfix p-b-4x" style="width: 240px; padding-left: 100px;">
		<a href="javascript:;" class="submit-buttom float-left" id="btn-activity-submit">确定</a>
	</div>
</div>
{/block}


{block name="js"}
<script type="text/javascript" src="/public/plug/editormd/src/editormd.js"></script>
<script type="text/javascript" src="/public/modules/upload.js"></script>
<script type="text/javascript" src="/public/plug/layer/layer.min.js"></script>
<script type="text/javascript" src="/public/plug/laydate/laydate.js"></script>
<script type="text/javascript" src="/public/plug/FormCombox/FormCombox.js"></script>
<script type="text/javascript" src="/public/modules/tool.js"></script>
<script type="text/javascript" src="/public/modules/interactive.js"></script>
<script type="text/javascript">
	var actid = tool.getSearch('actid');
	if (actid && actid > 0) {
		layer.load(0, {
			shade: [0.08, '#000']
		});
		ajax().get('/api?activity.admin.get', {
			'id': actid
		}, function(res) {
			layer.closeAll('loading');
			if(res.status == 200) {
				var list = res.data;
				$('input[name=type]').val(list.type);
				$('input[name=sign_up_url]').val(list.sign_up_url);
				$('input[name=title]').val(list.title);
				$('input[name=cover]').val(list.cover);
				$('input[name=address]').val(list.address);
				$('input[name=organizers]').val(list.organizers);
				$('input[name=start_time]').val(tool.formatDate(list.start_time));
				$('input[name=end_time]').val(tool.formatDate(list.end_time));
				$('#bind-cover').attr('src', list.cover);
				
				var localtion = list.localtion;
				
				var cont = list.introduction;
				cont = cont.replace(/&lt;/gi, '<');
				$('textarea[name=introduction]').val(cont);
				
				initActivity();
				
				if (localtion != '线上') {
					$('#bind-model-box').find('a[data-value=线下]').click();
					$('#bind-city-box .layout-select-container').find('li[data-value=' + localtion + ']').click();
				}
				
				$('#bind-type-box').find('a[data-value=' + list.type + ']').click();
				
			} else {
				window.parent.system.error(res.error);
			}
		});
	} else {
		initActivity();
	}
	
	$(function() {
		// 页面跳转
		$('li[layout-mark=link]').on('click', function() {
			window.location.href = $(this).attr('data-href');
		});
		
		$('[layout-mark=uploadFile]').on('change', function(e) {
			var picture = uploadFiles.getPicture(e);
			if(picture) {
				var u = $(this).attr('data-u');
				window[u].get($(this), picture);
				var fileInput = this.files[0];
				var form = new FormData();
				form.append("file", fileInput);
				form.append("name", "file");
				form.append("dir", 'upload');
				uploadFiles.getSrc('/api?common.upload', form, window[u]);
				this.parentNode.reset();
			}
		});
		
		// 提交
		$('#btn-activity-submit').on('click', submitActivity);
	});
	
	function initActivity() {
		var editor = editormd("content-editormd", {
			width: '100%',
			height: 540,
			path: '/public/plug/editormd/lib/',
			codeFold: true,
			saveHTMLToTextarea: true,
			searchReplace: true,
			htmlDecode: "style,script,iframe|on*",
			emoji: true,
			taskList: true,
			toolbarIcons: ["undo", "redo", "image", "code", "preformatted-text", "code-block", "table", "|", "watch", "preview", "fullscreen"],
			tocm: true, // Using [TOCM]
			tex: true, // 开启科学公式TeX语言支持，默认关闭
			flowChart: true, // 开启流程图支持，默认关闭
			sequenceDiagram: true, // 开启时序/序列图支持，默认关闭,
			imageUpload: true,
			imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
			imageUploadURL: "/api?common.editUpload",
			onload: function() {
				//console.log('onload', this);
			}
		});
		
		// 初始化表单
		var form = new FormCombox();
		form.autoInit('layout-form-activity');
		
		// 初始化时间选择器
		laydate.render({
			elem: '#start_time', //指定元素
			type: 'datetime'
		});
		// 初始化时间选择器
		laydate.render({
			elem: '#end_time', //指定元素
			type: 'datetime'
		});
		
		// 重置页面高度
		resetIframeHeight();
	}
	
	// 上传图片回调
	var __ucover = {
		'get': function(obj, src) {
			obj.parent().children('img').attr('src', src);
		},
		'onload': function(res) {
			if(res.status == 201) {
				$('#ipt-pc-cover').val(res.data.uri);
			} else {
				window.parent.system.error(res.error);
			}
		},
		'onerror': function(res) {
			window.parent.system.error('上传失败，请检测网络');
		}
	};
	
	// 提交
	function submitActivity() {
		var data_opt = {};
		$('#layout-form-activity').find('input[type=hidden],input[type=text]').each(function() {
			var name = this.name;
			data_opt[name] = this.value;
		});
		
		// 转码
		var str = $('#content').val();
		str = str.replace(/</gi, "&lt;");
		data_opt['introduction'] = str;
		
		if (data_opt.type == 0) delete data_opt['sign_up_url'];
		
		var localtion = '';
		if (data_opt.model == '线上') {
			localtion = data_opt.model;
		} else {
			localtion = data_opt.city
		}
		delete data_opt['model'];
		delete data_opt['city'];
		data_opt['localtion'] = localtion;
		
		if (actid && actid > 0) {
			data_opt['id'] = actid;
			submitActivityEdit(data_opt);
		} else {
			submitActivityAdd(data_opt);
		}
	}
	
	// 添加
	function submitActivityAdd(data_opt) {
		layer.load(0, {
			shade: [0.08, '#000']
		});
		ajax().post('/api?activity.admin.add', data_opt, function(res) {
			layer.closeAll('loading');
			if(res.status == 201) {
				window.parent.system.success('添加成功', function() {
					window.location.href = '/admin/act.html';
				});
			} else {
				window.parent.system.error(res.error);
			}
		});
	}
	
	// 编辑
	function submitActivityEdit(data_opt) {
		layer.load(0, {
			shade: [0.08, '#000']
		});
		ajax().put('/api?activity.admin.edit', data_opt, function(res) {
			layer.closeAll('loading');
			if(res.status == 201) {
				window.parent.system.success('编辑成功', function() {
					window.location.href = '/admin/act.html';
				});
			} else {
				window.parent.system.error(res.error);
			}
		});
	}
	
	// 单选框回调之选择类型
	function _cb_type(res) {
		if (res.value == 0) {
			// 自主
			$('.signupurl_box').hide();
		} else if (res.value == 1) {
			// 外链
			$('.signupurl_box').show();
		}
	}
	
	// 单选框回调之选择模式
	function _cb_model(res) {
		if (res.value == '线上') {
			// 线上
			$('.city_box').hide();
		} else if (res.value == '线下') {
			// 线下
			$('.city_box').show();
		}
	}
	
	// 下拉菜单回调之选择城市
	function _cb_city(res) {
		
	}
</script>
{/block}